<#import "/spring.ftl" as s>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <title>交付订单详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="<@s.url '/assets/plugins/bootstrap-datepicker/css/datepicker.css'/>">
    <link href="<@s.url '/assets/css/control.css'/>" rel="stylesheet" type="text/css">
    <#include '../../include/baselink.ftl'>
</head>
<body>
<div id="main">
<#include '../../include/header.ftl'>
<#include '../../include/sidebar.ftl'>
    <section id="content_wrapper">
        <section id="content" class="table-layout animated fadeIn">
            <div class="tray tray-center">
                <div class="page-heading pt10 pb10 mb10">
                    <div class="row">
                        <div class="col-md-12">
                            <h3>{{order.title}}<small>&nbsp;&nbsp;<label class="label label-success">{{order.stageMapped}}</label></small>
                                <small>| 渠道: <label class="text-primary">{{order.customerName}}</label></small>
                                <small>| 金额: <label class="text-primary">{{order.expectAmount}}万</label></small>
                                <small>| 商务经理: <label class="text-primary">{{order.userName}}</label></small>
                            </h3>
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <div class="panel-heading pn">
                        <ul class="nav panel-tabs-border panel-tabs panel-tabs-left">
                            <li class="active">
                                <a href="#tab_index" data-toggle="tab" aria-expanded="true">订单详情</a>
                            </li>
                        </ul>
                    </div>

                    <div class="panel-body">
                        <div class="tab-content pn br-n admin-form">
                            <div id="tab_index" class="tab-pane active">
                                <div class="col-sm-6">
                                    <#include 'modals/orderBasicTabPane.ftl'>
                                </div>
                                <div class="col-sm-6">
                                    <component-revisit-log ref="memorandumList" v-bind:loggableid="order.customerId" loggabletype="Contract" title="交付订单动态"></component-revisit-log>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
</div>
<#include '../../include/footer_js.ftl'/>
<script src="<@s.url '/assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js'/>"></script>
<script src="<@s.url '/assets/plugins/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.js'/>"></script>

<#include '../../component/revisit-log.ftl'/>
<script>

    var app = new Vue({
        el: '#main',
        data: {
            order: {},
            queryInfo: {
                id: getQueryString("id")
            }
        },
        created: function () {
            this.query();
        },
        mounted: function () {
        },
        computed:{
        },
        watch: {
        },
        methods: {
            query: function () {
                var url = contentPath + "/LxDeliverOrder/findLxDeliverOrderById?id="+this.queryInfo.id;
                this.$http.get(url).then(function (response) {
                    this.order = response.data.data;
                }, function (error) {
                    swal(error.body.msg);
                });
            }
        }
    });
</script>

</body>
</html>
